<template>
	<view class="content">
		<image class="logo" src="@/static/logo.png"></image>
		<view class="phone">
			<image src="@/static/phone.png" class="icon"></image>
			<input type="text" placeholder="请输入手机号码" class="input"/>
		</view>
		<view class="verify">
			<image src="@/static/verify.png" class="icon"></image>
			<input type="text" placeholder="请输入验证码" class="input"/>
		</view>
		<view style="width: 100%;">
			<view class="text">未注册的手机号验证后将自动创建优果账号</view>
		</view>
		<button class="loginBtn">登录</button>
		<view style="width: 100%;">
			<radio value="false"  borderColor="#F9C001" activeBackgroundColor="#F9C001" ></radio>
			<view class="text" style="display: inline;">
				我已阅读并同意<navigator url="">《优果用户协议》</navigator>及<navigator url="">《用户隐私政策》</navigator>
			</view>
		</view>
		<image class="socialPic" src="@/static/social.png"></image>
		<view class="logoline">
			<image src="@/static/Apple.png" class="logos"></image>
			<image src="@/static/QQ.png" class="logos"></image>
			<image src="@/static/Wechat.png" class="logos"></image>
			<image src="@/static/Weibo.png" class="logos"></image>
		</view>
	</view>
</template>

<script setup lang="ts">
	
</script>

<style scoped>
.content{
	width: 100vw;
	height:110vh;
	box-sizing: border-box;
	padding: 32rpx;
	background-color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.logo{
	width: 408rpx;
	height:196rpx;
	margin: 94rpx auto 150rpx;
}
.phone,.verify{
	width: 100%;
	height: 64rpx;
	margin-bottom: 60rpx;
	border-bottom: 6rpx solid #F1F1F1;
	
}
.icon{
	width: 40rpx;
	height: 40rpx;
	display: inline-block;
	margin-right: 34rpx;
}
.input{
	width: 400rpx;
	height: 40rpx;
	display: inline-block;
}
.text{
	height: 40rpx;
	color: #949494;
	font-size: 22rpx;
	line-height: 40rpx;
	text-align: left;
}
.loginBtn{
	margin: 36rpx 0;
	width: 100%;
	height: 88rpx;
	background-color: #F2F2F2;
	color: #797979;
	text-align: center;
	font-size: 30rpx;
	line-height: 88rpx;
}
navigator{
	color: #F9C001;
	display: inline-block;
}
.socialPic{
	width: 514rpx;
	height: 40rpx;
	margin-top: 340rpx;
	margin-bottom: 38rpx;
}
.logoline{
	width:514rpx;
	height: 40rpx;
	display: flex;
	flex-direction: row;
	justify-content: space-around;
}
.logos{
	width: 48rpx;
	height: 48rpx;
}
radio{
	transform:scale(0.5);
}
</style>
